<template>
  <div class="projects-page">
    <div class="add-button-container">
      <button class="add-button" @click="handleCardClick">新增项目</button>
    </div>
    <div class="project-cards-container">
      <div v-for="project in projects" :key="project.id" class="project-card" @click="handleCardClick(project)">
        <h2 class="project-name">{{ project.name }}</h2>
        <p class="project-description">{{ project.description }}</p>
        <div class="project-stats">
          <span>表数量: {{ project.tableCount }}</span>
          <span>模板数量: {{ project.templateCount }}</span>
          <span>点赞数量: {{ project.likeCount }}</span>
          <span>热度: {{ project.popularity }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { createModal } from '@/components/common/createModal';
import ProjectDialog from './components/project-dialog.vue';
export default {
  data() {
    return {
      projects: [
        {
          id: 1,
          name: '项目 1',
          description: '这是项目 1 的描述信息',
          tableCount: 10,
          templateCount: 5,
          likeCount: 200,
          popularity: 80
        },
        {
          id: 2,
          name: '项目 2',
          description: '这是项目 2 的描述信息',
          tableCount: 15,
          templateCount: 3,
          likeCount: 150,
          popularity: 70
        },
        {
          id: 3,
          name: '项目 3',
          description: '这是项目 3 的描述信息',
          tableCount: 8,
          templateCount: 6,
          likeCount: 250,
          popularity: 90
        }
      ]
    };
  },
  methods: {
    handleCardClick(project) {
      // 这里可以添加点击卡片后的逻辑，例如跳转到项目详情页
      // console.log('点击了项目:', project.name);

      let isEdit = !!project;
      createModal(ProjectDialog, {
        props: {
          isEdit
        },
        on: {
          customEvent: (data) => {
            console.log('收到自定义事件:', data)
          }
        },
        config: {
          header: '项目信息',
          closeOnClickOverlay: true,
          customButton: false,
          success: (data) => {
            console.log('确认操作数据:', data)
          }
        }
      })
    }
  }
};
</script>

<style scoped>
.projects-page {
  padding: 20px;
}

.add-button-container {
  text-align: right;
  margin-bottom: 20px;
}

.add-button {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.add-button:hover {
  background-color: #40a9ff;
}

.project-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.project-card {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.project-name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.project-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.project-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;
  color: #888;
}

.project-stats span {
  background-color: #f0f2f5;
  padding: 5px 10px;
  border-radius: 5px;
}
</style>
